<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-05-28 16:18:37
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-06-02 10:48:47
-->
{{extend '../_layouts/home.html'}}

{{block 'head'}}
<style type="text/css">
  .container {
    padding-top: 70px;
  }

  .form-control {
    width: 30%;
    height: 34px;
    display: block;
    position: initial;
    margin: 0;
    transform: none;
    font-size: 13px;
    color: #9e9e9e;
  }

  .tip {
    color: rgb(245, 87, 87);
    font-size: 12px;
  }

  .profileImg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .file-caption-main {
    box-sizing: border-box;
  }

  .input-group>.form-control,
  .input-group>.form-control-plaintext,
  .input-group>.custom-select,
  .input-group>.custom-file {
    left: 0 !important;
  }

  .btn {
    font-size: 13px;
  }
</style>
{{/block}}
{{block 'body'}}
<section class="container">
  {{include '../_partials/settings-nav.html'}}
  <form id="profile_form">
    <div class="form-group">
      <label for="">账号</label>
      <input type="email" class="form-control" id="" name="email" value="{{user.email}}" disabled="disabled"><span
        class="tip">* 账户不允许修改</span>
    </div>
    <div class="form-group">
      <label for="">昵称</label>
      <input type="text" class="form-control" id="" name="nickname" value="{{user.nickname}}">
    </div>
    <div class="form-group">
      <label for="">生日</label>
      <input type="date" class="form-control" id="" name="birthday" value="{{user.birthday}}">
    </div>
    <div class="form-group">
      <label for="">介绍</label>
      <textarea class="form-control" rows="3" name="bio" id="">{{user.bio}}</textarea>
    </div>
    <div class="form-group">
      <label for="">性别</label>
      <div>
        <label class="radio-inline">
          <input type="radio" name="gender" id="inlineRadio1" value="-1" {{ user.gender==-1?'checked':null }}> 男
        </label>
        <label class="radio-inline">
          <input type="radio" name="gender" id="inlineRadio2" value="1" {{ user.gender==1?'checked':null }}> 女
        </label>
        <label class="radio-inline">
          <input type="radio" name="gender" id="inlineRadio3" value="0" {{ user.gender==0?'checked':null }}> 保密
        </label>
      </div>
    </div>
    <div class="form-group">
      <label for="">头像设置</label>
      <input id="input-id" type="file" name="avatar">
    </div>
    <button type="submit" class="btn btn-success">保存</button>
  </form>
</section>
{{/block}}

{{block 'script'}}
<script>
  // 上传图片
  $("#input-id").fileinput({
    uploadUrl: "/public/img", //接受请求地址
    language: 'zh',
    showRemove: false,
    showUpload: false,
    autoReplace: true,
    allowedFileTypes: ['image'],//配置允许文件上传的类型
    allowedPreviewTypes: ['image'],//配置所有的被预览文件类型
    allowedPreviewMimeTypes: ['jpg', 'png'],//控制被预览的所有mime类型
    dropZoneEnabled: false, //是否显示拖拽区域
    enctype: 'multipart/form-data',
  });
  // 提交设置信息
  $("#profile_form").on("submit", function(e) {
    e.preventDefault()
    const formData = $(this).serialize()
    // console.log(formData);
    $.ajax({
      url: '/settings/profile',
      type: 'post',
      data: formData,
      dataType: 'json',
      success: function(data){
        console.log(data);
      }
    })
  })
</script>
{{ /block }}